<template>
  <input type="number" step="20" v-model="obj.current">
  <div style="margin: 200px; font-size: 3em;">
    {{ obj.tweenedNumber.toFixed() }}
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive, watch, watchEffect } from 'vue'
import gsap from 'gsap'

const obj = reactive({
  current: 0,
  tweenedNumber: 0
})

watch(() => obj.current, (newVal, oldVal) => {
  gsap.to(obj, {
    tweenedNumber: newVal
  })
})

</script>

<style lang='scss' scoped>
  input {
    margin: 30px;
    height: 50px;
    font-size: 50px;;
  }
</style>